<template>
  <div id="cooling-controllers">
    <div class="monitor-h">
      <Row class="header-h col-fff">
        <i-col span="24">
          <div id="monitorBtn">
            <m-tabs :btnText="btnTextList" @changeBtn="toggleComponent" :activeDateBtn="activeName"
            ></m-tabs>
          </div>
        </i-col>
      </Row>
    </div>
    <div v-show="activeIndex === 0">
      <div class="c-row">
        <div class="row-l width-1105">
          <Row style="margin-bottom: 20px; padding: 0 24px">
            <Col span="12">
              <!--            <system-btn-->
              <!--              :isBtn="isBtn1"-->
              <!--              @autoChange="autoChange1"-->
              <!--              @handChange="handChange1"-->
              <!--              @paramsBtn="paramsBtn1">-->
              <!--            </system-btn>-->
              <model-btn
                @selectClick="selectClick1"
                @paramsBtn="paramsBtn1"
                :choice="choice1"
                :selectValue="selectValue1"
                v-show="imgAirCompressor.length > 0"
              >
              </model-btn>
            </Col>
            <Col span="12">
              <div class="row-first-r">
              <span v-for="(item, index) in airCtrl.data"
                    v-if="index < 2"
                    :key="index">{{item.alias}} {{item.value}} {{item.unit}}</span>
              </div>
            </Col>
          </Row>
          <div class="row-img-container" id="airImg"
               onscroll="document.getElementById('airDes').scrollLeft=this.scrollLeft">
            <div class="row-img">
              <div class="list-status">
                <h4>
                  <span></span> 运行
                </h4>
                <h4>
                  <span></span> 待机
                </h4>
                <h4>
                  <span></span> 故障
                </h4>
              </div>
              <ul>
                <li v-for="(item, index) in imgAirCompressor" class="flex-1"
                    :style="{backgroundColor: item.devId ? (item.value == 1 ? 'rgba(67,204,186,40%)' :(item.value == 0 ? 'rgba(96,94,98,40%)' : 'rgba(168,20,48,40%)')) : '', cursor: item.devId ? 'pointer': 'default'}"
                    :key="index">
                  <div class="list-img" @click="item.devId ? openMachine(item) : ''"
                       @dblclick="!isBtn1 && item.devId ? dbBoot(item) : ''">
                    <img :src="imgNameFilter(item)"
                         :style="[item.devId ? '' : {height: '0%'}]"
                         alt="">
                    <span
                      :style="{color: item.value === 1 ? '' : (item.value === 0) ? 'rgba(165,176,183,1)' : 'rgba(168,20,48,1)'}">{{item.devId ? item.devName : ''}}</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="row-list" id="airDes" onscroll="document.getElementById('airImg').scrollLeft=this.scrollLeft">
            <div class="row-list-l">
              <ul>
                <li v-for="(item, index) in airCompressor" :key="index">{{item}}</li>
              </ul>
            </div>
            <div class="row-list-ul">
              <ul class="row-list-r flex-1" v-for="(item, index) in airCompressorValue" :key="index">
                <li v-for="(text, sub) in item.data" :key="sub" :class="rightValueColor(text)">
                  {{rightValueFilter(text)}}<span style="margin-left: 6px">{{text.unit}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="row-r width-684">
          <Row style="margin-bottom: 20px; padding: 0 24px">
            <Col span="14">
              <!--            <system-btn-->
              <!--              :isBtn="isBtn2"-->
              <!--              @autoChange="autoChange2"-->
              <!--              @handChange="handChange2"-->
              <!--              @paramsBtn="paramsBtn2">-->
              <!--            </system-btn>-->
              <model-btn
                @selectClick="selectClick2"
                @paramsBtn="paramsBtn2"
                :choice="choice2"
                :selectValue="selectValue2"
                v-show="imgPumpCompressor.length > 0"
              >
              </model-btn>
            </Col>
            <Col span="10">
              <div class="row-first-r">
              <span v-for="(item, index) in pumpCtrl.data"
                    v-if="index < 2"
                    :key="index">{{item.alias}} {{item.value}} {{item.unit}}</span>
              </div>
            </Col>
          </Row>
          <div class="row-img-container" id="pumpImg"
               onscroll="document.getElementById('pumpDes').scrollLeft=this.scrollLeft">
            <div class="row-img">
              <div class="list-status">
                <h4>
                  <span></span> 运行
                </h4>
                <h4>
                  <span></span> 待机
                </h4>
                <h4>
                  <span></span> 故障
                </h4>
              </div>
              <ul>
                <li v-for="(item, index) in imgPumpCompressor" class="width-24"
                    :style="{backgroundColor: item.devId ? (item.value == 1 ? 'rgba(67,204,186,40%)' :(item.value == 0 ? 'rgba(96,94,98,40%)' : 'rgba(168,20,48,40%)')) : '', cursor: item.devId ? 'pointer': 'default'}"
                    :key="index">
                  <div class="list-img" @click="item.devId ? openMachine(item) : ''"
                       @dblclick="!isBtn2 && item.devId ? dbBoot(item, true) : ''">
                    <img :src="imgNameFilter(item)"
                         :style="[item.devId ? '' : {height: '0%'}]"
                         alt="">
                    <span
                      :style="{color: item.value === 1 ? '' : (item.value === 0) ? 'rgba(165,176,183,1)' : 'rgba(168,20,48,1)'}">{{item.devId ? item.devName : ''}}</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="row-list" id="pumpDes" onscroll="document.getElementById('pumpImg').scrollLeft=this.scrollLeft">
            <div class="row-list-l">
              <ul>
                <li v-for="(item, index) in pumpCompressor" :key="index">{{item}}</li>
              </ul>
            </div>
            <div class="row-list-ul">
              <ul class="row-list-r width-24" v-for="(item, index) in pumpCompressorValue" :key="index">
                <li v-for="(text, sub) in item.data" :key="sub">{{rightValueFilter(text)}}<span
                  style="margin-left: 6px">{{text.unit}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="c-row">
        <div class="row-l width-1105">
          <Row style="margin-bottom: 20px; padding: 0 24px">
            <Col span="12">
              <!--            <system-btn-->
              <!--              :isBtn="isBtn3"-->
              <!--              @autoChange="autoChange3"-->
              <!--              @handChange="handChange3"-->
              <!--              @paramsBtn="paramsBtn3">-->
              <!--            </system-btn>-->
              <model-btn
                @selectClick="selectClick3"
                @paramsBtn="paramsBtn3"
                :choice="choice3"
                :selectValue="selectValue3"
                v-show="imgDryerCompressor.length > 0"
              >
              </model-btn>
            </Col>
            <Col span="12">
              <div class="row-first-r">
              <span v-for="(item, index) in dryerCtrl.data"
                    v-if="index < 2"
                    :key="index">{{item.alias}} {{item.value}} {{item.unit}}</span>
              </div>
            </Col>
          </Row>
          <div class="row-img-container" id="dryerImg"
               onscroll="document.getElementById('dryerDes').scrollLeft=this.scrollLeft">
            <div class="row-img">
              <div class="list-status">
                <h4>
                  <span></span> 运行
                </h4>
                <h4>
                  <span></span> 待机
                </h4>
                <h4>
                  <span></span> 故障
                </h4>
              </div>
              <ul>
                <li v-for="(item, index) in imgDryerCompressor" class="flex-1"
                    :style="{backgroundColor: item.devId ? (item.value == 1 ? 'rgba(67,204,186,40%)' :(item.value == 0 ? 'rgba(96,94,98,40%)' : 'rgba(168,20,48,40%)')) : '', cursor: item.devId ? 'pointer': 'default'}"
                    :key="index">
                  <div class="list-img" @click="item.devId ? openMachine(item) : ''"
                       @dblclick="!isBtn3 && item.devId ? dbBoot(item) : ''">
                    <img :src="imgNameFilter(item)" style="width: 61px;height: 70px;position: absolute;top: -56%;left: 24%;"
                         :style="[item.devId ? '' : {height: '0%'}]"
                         alt="">
                    <span
                      :style="{color: item.value === 1 ? '' : (item.value === 0) ? 'rgba(165,176,183,1)' : 'rgba(168,20,48,1)'}">{{item.devId ? item.devName : ''}}</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="row-list" id="dryerDes" onscroll="document.getElementById('dryerImg').scrollLeft=this.scrollLeft">
            <div class="row-list-l">
              <ul>
                <li v-for="(item, index) in dryerCompressor" :key="index">{{item}}</li>
              </ul>
            </div>
            <div class="row-list-ul">
              <ul class="row-list-r flex-1" v-for="(item, index) in dryerCompressorValue" :key="index">
                <li v-for="(text, sub) in item.data" :key="sub">{{rightValueFilter(text)}}<span
                  style="margin-left: 6px">{{text.unit}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="row-r width-684">
          <Row style="margin-bottom: 20px; padding: 0 24px">
            <Col span="14">
              <!--            <system-btn-->
              <!--              :isBtn="isBtn4"-->
              <!--              @autoChange="autoChange4"-->
              <!--              @handChange="handChange4"-->
              <!--              @paramsBtn="paramsBtn4">-->
              <!--            </system-btn>-->
              <model-btn
                @selectClick="selectClick4"
                @paramsBtn="paramsBtn4"
                :choice="choice4"
                :selectValue="selectValue4"
                v-show="imgTowerCompressor.length > 0"
              >
              </model-btn>
            </Col>
            <Col span="10">
              <div class="row-first-r">
              <span v-for="(item, index) in towerCtrl.data"
                    v-if="index < 2"
                    :key="index">{{item.alias}} {{item.value}} {{item.unit}}</span>
              </div>
            </Col>
          </Row>
          <div class="row-img-container" id="towerImg"
               onscroll="document.getElementById('towerDes').scrollLeft=this.scrollLeft">
            <div class="row-img">
              <div class="list-status">
                <h4>
                  <span></span> 运行
                </h4>
                <h4>
                  <span></span> 待机
                </h4>
                <h4>
                  <span></span> 故障
                </h4>
              </div>
              <ul>
                <li v-for="(item, index) in imgTowerCompressor" class="width-24"
                    :style="{backgroundColor: item.devId ? (item.value == 1 ? 'rgba(67,204,186,40%)' :(item.value == 0 ? 'rgba(96,94,98,40%)' : 'rgba(168,20,48,40%)')) : '', cursor: item.devId ? 'pointer': 'default'}"
                    :key="index">
                  <div class="list-img" @click="item.devId ? openMachine(item) : ''"
                       @dblclick="!isBtn4 && item.devId ? dbBoot(item, true) : ''">
                    <img :src="imgNameFilter(item)"
                         :style="[item.devId ? '' : {height: '0%'}]"
                         alt="">
                    <span
                      :style="{color: item.value === 1 ? '' : (item.value === 0) ? 'rgba(165,176,183,1)' : 'rgba(168,20,48,1)'}">{{item.devId ? item.devName : ''}}</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="row-list" id="towerDes" onscroll="document.getElementById('towerImg').scrollLeft=this.scrollLeft">
            <div class="row-list-l">
              <ul>
                <li v-for="(item, index) in towerCompressor" :key="index">{{item}}</li>
              </ul>
            </div>
            <div class="row-list-ul">
              <ul class="row-list-r width-24" v-for="(item, index) in towerCompressorValue" :key="index">
                <li v-for="(text, sub) in item.data" :key="sub">{{rightValueFilter(text)}}<span
                  style="margin-left: 6px">{{text.unit}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <m-modal
      :modalToggle="isAir"
      :limit="limitAir"
      modalTitle='总管出气压力'
      @modalSave="pressureAir"
      @maskClose="pressureAirMask"
      @mask="pressureAirMask"
    >
    </m-modal>
    <m-modal
      :modalToggle="isPump"
      :limit="limitPump"
      modalTitle='冷却供水压力'
      @modalSave="pressurePump"
      @maskClose="pressurePumpMask"
      @mask="pressurePumpMask"
    >
    </m-modal>
    <m-modal
      :modalToggle="isDryer"
      :limit="limitDryer"
      modalTitle='总管瞬时流量'
      @modalSave="pressureDryer"
      @maskClose="pressureDryerMask"
      @mask="pressureDryerMask"
    >
    </m-modal>
    <m-modal
      :modalToggle="isTower"
      :limit="limitTower"
      modalTitle='冷却回水温度'
      @modalSave="pressureTower"
      @maskClose="pressureTowerMask"
      @mask="pressureTowerMask"
    >
    </m-modal>
    <!--双击显示的 弹窗-->
    <m-modal
      ref="rate"
      :modalToggle="boot"
      :limit="limitTower"
      :isTrue="false"
      :boots="boots"
      :loading="loading"
      :modalTitle="bootTitle"
      :isOpen="isOpen"
      :shutDown="shutDown"
      :openClose="openClose"
      :btnText="btnText"
      :activeDateBtn="activeDateBtn"
      @changeBtn="openCloseChange"
      :rateLoading="rateLoading"
      @rateSend="rateSend"
      @oneShutDown="oneShutDown"
      @modalShutDown="modalShutDown"
      @maskClose="bootMask"
      @mask="bootMask"
    >
    </m-modal>
    <!--远程人工和现场自动 的 保存确定弹窗-->
    <m-save-modal :saveToggle="saveToggle" @saveMask="saveMask" @maskClose="saveMask" @confirmSave="confirmSave">
    </m-save-modal>
    <div id="mEcharts" v-show="mEcharts" @click.self="mEchartsChange">
      <div class="line-box">
        <div class="line-box-head">
          <Row>
            <Col span="4">
              <h2>{{mEchartsObj.devName}}</h2>
            </Col>
            <Col span="20">
              <Row>
                <Col span="10">
                  <m-date
                    :datePicker="activeDate"
                    ref="mDate"
                    @monthClick="monthClick"
                    @yearClick="yearClick"
                    @timeClick="timeClick"
                    @dayClick="dayClick">
                  </m-date>
                </Col>
                <Col span="10">
                  <div id="widthScroll">
                    <div class="widthScroll">
                      <Button v-for="(prop, index) in mEchartsObj.props"
                              :key="index"
                              :type="activeBtn === prop ? 'warning' : 'primary'"
                              @click="changeBtn(prop)"
                              class="mar-left-10"
                              style="display: inline-block; width: 80px; height: 40px;">{{prop}}
                      </Button>
                    </div>
                  </div>
                </Col>
                <Col span="4">
                  <div style="float: right; padding-right: 20px">
                    <Button :type="activeBtnForm ? 'warning' : 'primary'" @click="downForm"
                            class="mar-left-10"
                            style="height: 40px;width: 100px">下载表格
                    </Button>
                  </div>
                </Col>
              </Row>
            </Col>
            <!--<Col span="2">-->
            <!--<span class="icon-hold"></span>-->
            <!--&lt;!&ndash;<img style="width: 40px;height: 40px" src="../../../assets/mainImages/icon_hold.png" alt="">&ndash;&gt;-->
            <!--</Col>-->
          </Row>
        </div>
        <div id="lineCharts" ref="lineCharts"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import SystemBtn from '../../../components/common/systemBtn'
  import MModal from '../../../components/common/mModal'
  import echarts from 'echarts'
  import transformFilters from '../../../util/transformFilters'
  import {imgFilter} from '@/util/imgFilter'
  import {mapState} from 'vuex'
  import MSaveModal from '../../../components/common/mSaveModal'
  import MDate from '../../../components/common/mDate'
  import mTabs from '../../../components/common/mTabs'
  import ModelBtn from '../../../components/common/modelBtn'

  var time = null
  export default {
    name: 'controllers',
    props: {},
    mixins: [transformFilters],
    data () {
      return {
        // 6月10日 需求变更的 和 7月01日 新需求更新
        btnTextList: [],
        activeName: -1,
        activeIndex: 0,
        // 7月01日新需求的各个设备的ID 对象
        // idObj: {},
        // end
        // 三种模式
        // 第一行 左
        choice1: null,
        // 备份 下拉框到底选的是什么
        copySelect1: '',
        // 选择框 显示的 文本
        selectValue1: '',
        // 第一行 右
        choice2: null,
        // 备份 下拉框到底选的是什么
        copySelect2: '',
        // 选择框 显示的 文本
        selectValue2: '',
        // 第二行 左
        choice3: null,
        // 备份 下拉框到底选的是什么
        copySelect3: '',
        // 选择框 显示的 文本
        selectValue3: '',
        // 第二行 右
        choice4: null,
        // 备份 下拉框到底选的是什么
        copySelect4: '',
        // 选择框 显示的 文本
        selectValue4: '',
        // end
        // 一键开机，一键关机 | 的弹窗 显示隐藏
        boot: false,
        // loading  显示
        loading: false,
        // 故障图片控制 显示隐藏
        shutDown: false,
        // 一键开机，一键关机 显示隐藏
        isOpen: false,
        // 冷却泵 ， 开关显示
        openClose: false,
        // 冷却泵双击 弹窗 显示的 开启和关闭 的数组和激活按钮
        btnText: ['开 启', '关 闭'],
        activeDateBtn: '',
        rateLoading: false,
        // 需要的弹窗标题和数据
        bootTitle: '',
        boots: [],
        // 远程人工和 现场自动的 保存弹窗 显示隐藏
        saveToggle: false,
        // 克隆备份
        limitCopy: {
          devId: '',
          devParams: []
        },
        // end
        // 工艺控制 modal 时间选择
        activeDate: new Date().format('yyyy-MM-dd hh'),
        // end
        // 按钮激活状态
        activeBtn: '',
        activeBtnForm: false,
        // mEcharts 图表控制是否显示
        mEcharts: false,
        mEchartsObj: {
          ctrlProcess: [],
          data: [],
          devId: '',
          devName: '',
          props: []
        },
        // 各个机器的 数据需要的数组 start
        // 定时器
        conTimer: null,
        // 空压机和 图片需要的数组
        airCompressor: [], // 空压机 左侧 键值对的 Key
        airCompressorValue: [], // 空压机 右侧 键值对 的 Value
        imgAirCompressor: [], // 空压机 上面的 图片 数组
        airCtrl: {}, // 空压机 的 第一行上面的流量压力的 累积流量和出气压力
        // 空压机 压力弹窗 控制显示与否 参数 弹窗 start
        isAir: false,
        isBtn1: true,
        // 参数设定
        limitAir: {
          devId: '',
          devParams: []
        },
        // 远程人工 和自动控制
        airSwitch: {
          devId: '',
          devParams: []
        },
        // 冷却泵和 图片需要的数组
        pumpCompressor: [], // 冷却泵 左侧 键值对的 Key
        pumpCompressorValue: [], // 冷却泵 右侧 键值对 的 Value
        imgPumpCompressor: [], // 冷却泵 上面的 图片 数组
        pumpCtrl: {}, // 冷却泵 的 第一行上面的流量压力的 累积流量和出气压力
        // 冷却泵 压力弹窗 控制显示与否 参数 弹窗 start
        isPump: false,
        isBtn2: true,
        // 参数设定
        limitPump: {
          devId: '',
          devParams: []
        },
        // 远程人工 和自动控制
        pumpSwitch: {
          devId: '',
          devParams: []
        },
        // 冷干机和 图片需要的数组
        dryerCompressor: [], // 冷干机 左侧 键值对的 Key
        dryerCompressorValue: [], // 冷干机 右侧 键值对 的 Value
        imgDryerCompressor: [], // 冷干机 上面的 图片 数组
        dryerCtrl: {}, // 冷干机 的 第一行上面的流量压力的 累积流量和出气压力
        // 冷干机 压力弹窗 控制显示与否 参数 弹窗 start
        isDryer: false,
        isBtn3: true,
        // 参数设定
        limitDryer: {
          devId: '',
          devParams: []
        },
        // 远程人工 和自动控制
        dryerSwitch: {
          devId: '',
          devParams: []
        },
        // 冷却塔和 图片需要的数组
        towerCompressor: [], // 冷却塔 左侧 键值对的 Key
        towerCompressorValue: [], // 冷却塔 右侧 键值对 的 Value
        imgTowerCompressor: [], // 冷却塔 上面的 图片 数组
        towerCtrl: {}, // 冷却塔 的 第一行上面的流量压力的 累积流量和出气压力
        // 冷干机 压力弹窗 控制显示与否 参数 弹窗 start
        isTower: false,
        isBtn4: true,
        // 参数设定
        limitTower: {
          devId: '',
          devParams: []
        },
        // 远程人工 和自动控制
        towerSwitch: {
          devId: '',
          devParams: []
        },
        // end
        // 各个机器的 现场自动和远程人工的 区分
        classify: 1,
        initLineChartsColor: {
          'A相电压': '#2378FF',
          'B相电压': '#43CCBA',
          'C相电压': '#EFAD0E',
          '运行状态': '#f00'
        },
        // 各个 定时器
        timeEnd: null,
        timeStart: null
        // commonTime: null
      }
    },

    created () {
    },
    mounted () {
      // 获取 初始化 数据 // 定时器刷新数据
      // 异步解决
      // 公共数据的方法
      // this.commonTime = setTimeout(() => {
      //   this.commonGetDataControl()
      // }, 500)
      this.commonGetDataControl()
    },
    computed: {
      ...mapState('user', {
        facility: state => state.facility
      })
    },
    methods: {
      // 7月01日后的清空方法
      allEmpty () {
        // 清空 各个设备的 数据 左上1
        this.airCompressor = [] // 空压机 左侧 键值对的 Key
        this.airCompressorValue = [] // 空压机 右侧 键值对 的 Value
        this.imgAirCompressor = [] // 空压机 上面的 图片 数组
        this.airCtrl = {} // 空压机 的 第一行上面的流量压力的 累积流量和出气压力
        // 清空 各个设备的 数据 右上1
        this.pumpCompressor = [] // 空压机 左侧 键值对的 Key
        this.pumpCompressorValue = [] // 空压机 右侧 键值对 的 Value
        this.imgPumpCompressor = [] // 空压机 上面的 图片 数组
        this.pumpCtrl = {} // 空压机 的 第一行上面的流量压力的 累积流量和出气压力
        // 清空 各个设备的 数据 左下1
        this.dryerCompressor = [] // 空压机 左侧 键值对的 Key
        this.dryerCompressorValue = [] // 空压机 右侧 键值对 的 Value
        this.imgDryerCompressor = [] // 空压机 上面的 图片 数组
        this.dryerCtrl = {} // 空压机 的 第一行上面的流量压力的 累积流量和出气压力
        // 清空 各个设备的 数据 右下1
        this.towerCompressor = [] // 空压机 左侧 键值对的 Key
        this.towerCompressorValue = [] // 空压机 右侧 键值对 的 Value
        this.imgTowerCompressor = [] // 空压机 上面的 图片 数组
        this.towerCtrl = {} // 空压机 的 第一行上面的流量压力的 累积流量和出气压力
        clearTimeout(this.conTimer)
        clearTimeout(this.timeEnd)
        clearTimeout(this.timeStart)
        clearTimeout(time)
        // 清空mTabs 分页的 默认选中的 和 清空数组
        this.activeName = -1
        this.activeIndex = 0
        this.btnTextList = []
      },
      // 获得 mTabs 分页的 方法
      _getTabs () {
        let params = {
          type: 101,
          spaceId: this.facility
        }
        return window.myapi.getTabs(params).then(res => {
          return res.data.data
        }).catch((e) => {
        })
      },
      // 获得 mTabs 分页的id 请求各个设备的 id 的方法
      // _getTabsDevids (params) {
      //   return window.myapi.getTabsDevids(params).then(res => {
      //     return res.data.data
      //   }).catch((e) => {
      //   })
      // },
      // 异步公共方法
      async commonGetDataControl () {
        try {
          const btnTextList = await this._getTabs().then(res => res)
          if (!btnTextList.length) {
            this.btnTextList = []
            this.activeName = -1
            this.$Notice.warning({
              title: '提示',
              desc: '站房无数据，请补充数据....'
            })
            return false
          } else {
            this.btnTextList = btnTextList
            this.activeName = btnTextList[0].value
          }
          // let params = {
          //   spaceId: this.activeName
          // }
          // this.idObj = await this._getTabsDevids(params).then(res => res)
          // if (this.idObj[0]) {
          // 工艺控制 > 制冷机房 的请求接口的 异步方法
          this._controllersTimer(this.activeName, 2000)
          // }
        } catch (err) {
          console.error(err)
        }
      },
      // 6月10日 需求变更的
      // 切换菜单的方法
      toggleComponent (val, index) {
        if (val === this.activeName) return false
        this.activeName = val
        this.activeIndex = index
        // if (this.activeName !== '制冷机房') {
        //   clearTimeout(this.conTimer)
        // } else {
        //   // 获取 初始化 数据 // 定时器刷新数据
        //   this._controllersTimer(2000)
        // }
      },
      // 远程模式下的 选择 远程手动 和 现场自动 的方法 (第一行 左)
      selectClick1 (item) {
        this.copySelect1 = item
        this.classify = 1
        this.saveToggle = true
      },
      // 远程模式下的 选择 远程手动 和 现场自动 的方法 (第一行 右)
      selectClick2 (item) {
        this.copySelect2 = item
        this.classify = 2
        this.saveToggle = true
      },
      // 远程模式下的 选择 远程手动 和 现场自动 的方法 (第二行 左)
      selectClick3 (item) {
        this.copySelect3 = item
        this.classify = 3
        this.saveToggle = true
      },
      // 远程模式下的 选择 远程手动 和 现场自动 的方法 (第二行 右)
      selectClick4 (item) {
        this.copySelect4 = item
        this.classify = 4
        this.saveToggle = true
      },
      // end
      /*
        时间组件的 公共方法
      */
      monthClick () {
        this.activeDate = this.$refs.mDate.year + '-' + this.$refs.mDate.month + '-01' + ' 00'
        this.timeRefreshDate()
      },
      yearClick () {
        this.activeDate = this.$refs.mDate.year + '-01' + '-01' + ' 00'
        this.timeRefreshDate()
      },
      timeClick () {
        this.activeDate = this.$refs.mDate.year + '-' + this.$refs.mDate.month + '-' + this.$refs.mDate.day + ' ' + this.$refs.mDate.time
        this.timeRefreshDate()
      },
      dayClick () {
        this.activeDate = this.$refs.mDate.year + '-' + this.$refs.mDate.month + '-' + this.$refs.mDate.day + ' 00'
        this.timeRefreshDate()
      },
      // 每一项 的 样式控制
      rightValueColor (text) {
        if (text.dataType === '开状态') {
          return text.value === 0 ? '' : ''
        }
      },
      // 右侧Value 的数据过滤
      rightValueFilter (text) {
        // 运行状态
        if (text.dataType === '运行状态') {
          if (text.value === 0) {
            text = {...{unit: '', dataType: '运行状态', value: '关'}}
          } else if (text.value === 1) {
            text = {...{unit: '', dataType: '运行状态', value: '开'}}
          } else {
            text = {...{unit: '', dataType: '运行状态', value: '故障'}}
          }
        }
        // 各个开关
        if (text.dataType === '开状态') {
          if (text.value === 0) {
            text = {...{unit: '', dataType: '开状态', value: '否'}}
          } else {
            text = {...{unit: '', dataType: '开状态', value: '是'}}
          }
        }
        if (text.dataType === '关状态') {
          if (text.value === 0) {
            text = {...{unit: '', dataType: '关状态', value: '否'}}
          } else {
            text = {...{unit: '', dataType: '关状态', value: '是'}}
          }
        }
        if (text.dataType === '开到位') {
          if (text.value === 0) {
            text = {...{unit: '', dataType: '开到位', value: '否'}}
          } else {
            text = {...{unit: '', dataType: '开到位', value: '是'}}
          }
        }
        if (text.dataType === '关到位') {
          if (text.value === 0) {
            text = {...{unit: '', dataType: '关到位', value: '否'}}
          } else {
            text = {...{unit: '', dataType: '关到位', value: '是'}}
          }
        }
        if (text.dataType === '开输出') {
          if (text.value === 0) {
            text = {...{unit: '', dataType: '开输出', value: '否'}}
          } else {
            text = {...{unit: '', dataType: '开输出', value: '是'}}
          }
        }
        if (text.dataType === '关输出') {
          if (text.value === 0) {
            text = {...{unit: '', dataType: '关输出', value: '否'}}
          } else {
            text = {...{unit: '', dataType: '关输出', value: '是'}}
          }
        }
        // 运行权限和运行模式
        // if (text.dataType === '运行权限') {
        //   if (text.value == 0) {
        //     text = {...{unit: '', dataType: '运行权限', value: '远程'}}
        //   } else {
        //     text = {...{unit: '', dataType: '运行权限', value: '就地'}}
        //   }
        // }
        // if (text.dataType === '运行模式') {
        //   if (text.value == 0) {
        //     text = {...{unit: '', dataType: '运行模式', value: '远程自动'}}
        //   } else {
        //     text = {...{unit: '', dataType: '运行模式', value: '本地手动'}}
        //   }
        // }
        return text.value
      },
      // 图片过滤方法
      imgNameFilter (item) {
        let type = imgFilter(item.pic, item.value)
        if (item.devId && type) {
          return require(`../../../assets/mainImages/${type}.png`)
        } else {
          return require(`../../../assets/mainImages/unknown.png`)
        }
      },
      // 初始化数据
      // init () {
      // },
      // 时间选择 Echarts 图表刷新数据
      timeRefreshDate () {
        if (this.mEchartsObj.devId) {
          let params = {
            devId: this.mEchartsObj.devId,
            type: this.activeBtn,
            time: this.activeDate
          }
          this.comDevItemData(params)
        }
      },
      // 刷新 数据
      refreshData () {
        // 获取 初始化 数据 // 定时器刷新数据
        this.commonGetDataControl()
      },
      // 折线图
      initLineCharts (data) {
        let dom = this.$refs.lineCharts
        let myChart = echarts.init(dom)
        let option = {
          title: {
            show: false
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line'
            },
            backgroundColor: '#fff',
            textStyle: {
              color: '#333',
              fontSize: 12
            }
          },
          legend: {
            show: false,
            textStyle: {
              color: '#fff'
            }
          },
          grid: {
            left: '80px',
            right: '65px',
            bottom: '35px',
            top: '44px',
            containLabel: false
          },
          toolbox: {
            height: 30,
            top: '-1%',
            right: '2%',
            feature: {
              saveAsImage: {
                backgroundColor: '#15295f',
                iconStyle: {
                  borderColor: '#fff',
                  borderWidth: 2
                }
              }
            }
          },
          xAxis: {
            type: 'category',
            name: '(min)',
            nameGap: 10,
            nameTextStyle: {
              color: '#fff',
              padding: [50, 0, 0, 0]
            },
            boundaryGap: ['20%', '20%'],
            // boundaryGap: false,
            // data: Array.from({length: 60}, (v, k) => k + 1),
            data: [1, '', '', '', 5, '', '', '', '', 10, '', '', '', '', 15, '', '', '', '', 20, '', '', '', '', 25, '', '', '', '', 30, '', '', '', '', 35, '', '', '', '', 40, '', '', '', '', 45, '', '', '', '', 50, '', '', '', '', 55, '', '', '', '', 60],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#8C99B6',
                width: 2
              }
            },
            axisLabel: {
              color: '#fff',
              // interval: 3,
              margin: 20
              // formatter: (value, index) => {
              //   console.log(value)
              //   console.log(index)
              // }
            },
            axisTick: {
              length: 10,
              alignWithLabel: true,
              lineStyle: {
                color: '#8C99B6'
              }
            }
          },
          yAxis: {
            type: 'value',
            show: true,
            name: '(Kpa)',
            // nameLocation: 'middle',
            nameTextStyle: {
              color: '#fff',
              padding: [0, 50, 0, 0]
            },
            nameGap: 20,
            // min: 0,
            // max: 250,
            // scale: true,
            position: 'left',
            splitLine: {
              lineStyle: {
                type: 'dashed',
                show: false,
                color: '#8C99B6'
                // opacity: 0
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#8C99B6'
              }
            },
            // axisTick: {
            //   length: 0
            // },
            axisLabel: {
              inside: false,
              margin: 15,
              show: true,
              color: '#fff',
              formatter: (value) => {
                if (value >= 10000 && value < 10000000) {
                  value = value / 10000 + '万'
                } else if (value >= 10000000) {
                  value = value / 10000000 + '千万'
                }
                return value
              }
            }
          },
          series: [
            {
              name: '工厂1',
              smooth: true,
              type: 'line',
              // yAxisIndex: 0,
              // stack: '总量',
              color: '#7489F6',
              lineStyle: '#7489F6',
              // areaStyle: {
              //   color: '#2B4298'
              // },
              data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 31]
            },
            {
              name: '工厂2',
              smooth: true,
              type: 'line',
              // yAxisIndex: 1,
              // stack: '总量',
              color: '#43CCBA',
              lineStyle: {
                color: '#43CCBA'
              },
              // areaStyle: {
              //   color: '#246198'
              // },
              data: [0, 0, 0, 0, 0, 230, 210, 90, 230, 210, 90, 230]
            }
          ]
        }
        option.xAxis = {...option.xAxis, ...data.xAxis}
        option.yAxis = {...option.yAxis, ...{name: data.yUnit}}
        data.legend = data.legend.map(item => {
          let obj = {
            name: item,
            textStyle: {color: '#2d8cf0'}
          }
          return obj
        })
        option.legend = {data: [...data.legend], left: '80%'}
        option.series = data.series.map(item => {
          let obj = {
            name: item.name,
            data: item.data,
            smooth: true,
            type: 'line',
            color: this.initLineChartsColor[item.name],
            lineStyle: '#7489F6'
          }
          return obj
        })
        if (option && typeof option === 'object') {
          myChart.setOption(option, true)
          window.addEventListener('resize', () => {
            myChart.resize()
          })
        }
      },
      /*
      * 远程人工和现场自动 的 保存弹窗 start
      * */
      // 点击取消 遮罩层
      saveMask () {
        this.saveToggle = false
      },
      // 确定的方法
      confirmSave () {
        switch (this.classify) {
          case 1:
            let paramArr1 = []
            if (this.isBtn1) {
              console.log(this.airSwitch)
              paramArr1 = this.airSwitch.devParams.map(item => {
                let obj = {...item, ...{value: 1}}
                return obj
              })
            } else {
              paramArr1 = this.airSwitch.devParams.map(item => {
                let obj = {...item, ...{value: 0}}
                return obj
              })
            }
            window.myapi.updParam(paramArr1).then(res => {
              if (res.data.status === 200) {
                this.selectValue1 = this.copySelect1
                this.saveToggle = false
                this.isBtn1 = !this.isBtn1
              } else {
                let msg = res.data.msg ? res.data.msg : '请求数据失败!'
                this.$Message.error({content: msg, duration: 5, closable: true})
              }
            }).catch(function (e) {
            })
            break
          case 2:
            let paramArr2 = []
            if (this.isBtn2) {
              console.log(this.pumpSwitch)
              paramArr2 = this.pumpSwitch.devParams.map(item => {
                let obj = {...item, ...{value: 1}}
                return obj
              })
            } else {
              paramArr2 = this.pumpSwitch.devParams.map(item => {
                let obj = {...item, ...{value: 0}}
                return obj
              })
            }
            window.myapi.updParam(paramArr2).then(res => {
              if (res.data.status === 200) {
                this.selectValue2 = this.copySelect2
                this.saveToggle = false
                this.isBtn2 = !this.isBtn2
              } else {
                let msg = res.data.msg ? res.data.msg : '请求数据失败!'
                this.$Message.error({content: msg, duration: 5, closable: true})
              }
            }).catch(function (e) {
            })
            break
          case 3:
            let paramArr3 = []
            if (this.isBtn3) {
              console.log(this.dryerSwitch)
              paramArr3 = this.dryerSwitch.devParams.map(item => {
                let obj = {...item, ...{value: 1}}
                return obj
              })
            } else {
              paramArr3 = this.dryerSwitch.devParams.map(item => {
                let obj = {...item, ...{value: 0}}
                return obj
              })
            }
            window.myapi.updParam(paramArr3).then(res => {
              if (res.data.status === 200) {
                this.selectValue3 = this.copySelect3
                this.saveToggle = false
                this.isBtn3 = !this.isBtn3
              } else {
                let msg = res.data.msg ? res.data.msg : '请求数据失败!'
                this.$Message.error({content: msg, duration: 5, closable: true})
              }
            }).catch(function (e) {
            })
            break
          case 4:
            let paramArr4 = []
            if (this.isBtn4) {
              console.log(this.towerSwitch)
              paramArr4 = this.towerSwitch.devParams.map(item => {
                let obj = {...item, ...{value: 1}}
                return obj
              })
            } else {
              paramArr4 = this.towerSwitch.devParams.map(item => {
                let obj = {...item, ...{value: 0}}
                return obj
              })
            }
            window.myapi.updParam(paramArr4).then(res => {
              if (res.data.status === 200) {
                this.selectValue4 = this.copySelect4
                this.saveToggle = false
                this.isBtn4 = !this.isBtn4
              } else {
                let msg = res.data.msg ? res.data.msg : '请求数据失败!'
                this.$Message.error({content: msg, duration: 5, closable: true})
              }
            }).catch(function (e) {
            })
            break
          default:
            break
        }
      },
      // end
      // 现场自动1
      // autoChange1 () {
      //   this.classify = 1
      //   this.saveToggle = true
      // },
      // 远程人工1
      // handChange1 () {
      //   this.classify = 1
      //   this.saveToggle = true
      // },
      // 现场自动2
      // autoChange2 () {
      //   this.classify = 2
      //   this.saveToggle = true
      // },
      // 远程人工2
      // handChange2 () {
      //   this.classify = 2
      //   this.saveToggle = true
      // },
      // 现场自动3
      // autoChange3 () {
      //   this.classify = 3
      //   this.saveToggle = true
      // },
      // 远程人工3
      // handChange3 () {
      //   this.classify = 3
      //   this.saveToggle = true
      // },
      // 现场自动4
      // autoChange4 () {
      //   this.classify = 4
      //   this.saveToggle = true
      // },
      // 远程人工4
      // handChange4 () {
      //   this.classify = 4
      //   this.saveToggle = true
      // },
      // 参数设定1
      paramsBtn1 () {
        this.limitCopy = JSON.parse(JSON.stringify(this.limitAir))
        this.isAir = true
      },
      // 参数设定2
      paramsBtn2 () {
        this.limitCopy = JSON.parse(JSON.stringify(this.limitPump))
        this.isPump = true
      },
      // 参数设定3
      paramsBtn3 () {
        this.limitCopy = JSON.parse(JSON.stringify(this.limitDryer))
        this.isDryer = true
      },
      // 参数设定4
      paramsBtn4 () {
        this.limitCopy = JSON.parse(JSON.stringify(this.limitTower))
        this.isTower = true
      },
      /*
      * 双击 图片 弹窗 控制部分
      * */
      // 遮罩层 关闭
      bootMask () {
        if (this.loading || this.rateLoading) {
          return false
        }
        this.$refs.rate.rateClear()
        this.shutDown = false
        this.boot = false
      },
      // 机器故障 的弹窗 关闭
      modalShutDown () {
        this.shutDown = false
        this.boot = false
      },
      // 双击图片 弹窗显示
      dbBoot (item, flag) {
        clearTimeout(time)
        if (flag) {
          this.openClose = true
        } else {
          this.openClose = false
        }
        let copyObj = {...item}
        this.boot = true
        this.bootTitle = copyObj.devName
        // 如果 主机 开着， 显示 倒序 ，一键关机
        if (copyObj.value === 1) {
          this.isOpen = false
          this.boots = copyObj.ctrlProcess.map(val => {
            let obj = {...val, ...{value: 1}}
            return obj
          }).reverse()
          // 如果 主机 关着， 显示 正序 ，一键开机
        } else if (copyObj.value === 0) {
          this.isOpen = true
          this.boots = copyObj.ctrlProcess.map(val => {
            let obj = {...val, ...{value: 2}}
            return obj
          })
        } else {
          this.shutDown = true
        }
      },
      // 双击冷却泵 弹窗 改变频率的 开启 和关闭
      openCloseChange (item) {
        if (this.boots.length === 0) {
          this.$Notice.warning({
            title: '提示',
            desc: '无法获取该设备对应的【参数设定】数据，请检查是否配置，并包含runHz命令标志的参数'
          })
          return
        }
        let startDev = this.boots.find(v => v.command === 'startInverter').devId
        if (startDev === undefined) {
          this.$Notice.warning({
            title: '提示',
            desc: '无法获取startInverter命令标志的参数, 请配置'
          })
          return
        }
        let startDevId = startDev.devId
        let stopDev = this.boots.find(v => v.command === 'stopInverter').devId
        if (stopDev === undefined) {
          this.$Notice.warning({
            title: '提示',
            desc: '无法获取stopInverter命令标志的参数, 请配置'
          })
          return
        }
        let stopDevId = stopDev.devId
        if (this.activeDateBtn === item) return false
        this.activeDateBtn = item
        if (this.activeDateBtn === '开 启') {
          this.onePostTimer({devId: startDevId, param: '', cmd: 'startInverter'}).then(res => {
          })
        } else {
          this.onePostTimer({devId: stopDevId, param: '', cmd: 'stopInverter'}).then(res => {
          })
        }
      },
      // 双击冷却泵 弹窗 改变频率的 发送
      rateSend (val) {
        if (this.boots.length === 0) {
          this.$Notice.warning({
            title: '提示',
            desc: '无法获取该设备对应的【参数设定】数据，请检查是否配置，并包含runHz命令标志的参数'
          })
          return
        }
        let d = this.boots.find(v => v.command === 'runHz')
        if (d === undefined) {
          this.$Notice.warning({
            title: '提示',
            desc: '无法获取runHz命令标志的参数, 请配置'
          })
          return
        }
        let devId = d.devId
        this.rateLoading = true
        this.onePostTimer({devId: devId, param: val, cmd: 'runHz'}).then(res => {
          this.$refs.rate.rateClear()
          this.rateLoading = false
        })
      },
      // 一键开机 和一键 关机的 确认方法
      oneShutDown () {
        this.oneShutDownAsync()
      },
      // 一键开机 和一键 关机的 确认方法
      async oneShutDownAsync () {
        let paramsArr = this.boots.map(item => item.devId)
        this.loading = true
        // 如果 是 一键开机
        if (!this.isOpen) {
          for (let i = 0; i < paramsArr.length; i++) {
            this.boots = this.boots.map(val => {
              let obj = {}
              if (val.devId === paramsArr[i]) {
                obj = {...val, ...{value: 4}}
              } else {
                obj = {...val}
              }
              return obj
            })
            await this.onePostTimer({devId: paramsArr[i], param: '', cmd: 'start'}).then(res => {
              console.log(res)
              this.boots = this.boots.map(val => {
                let obj = {}
                if (val.devId === paramsArr[i]) {
                  obj = {...val, ...{value: 2}}
                } else {
                  obj = {...val}
                }
                return obj
              })
            })
          }
          this.timeStart = setTimeout(() => {
            this.loading = false
            this.boot = false
          }, 2000)
          // 否则 是一键 关机
        } else {
          for (let i = 0; i < paramsArr.length; i++) {
            this.boots = this.boots.map(val => {
              let obj = {}
              if (val.devId === paramsArr[i]) {
                obj = {...val, ...{value: 4}}
              } else {
                obj = {...val}
              }
              return obj
            })
            await this.onePostTimer({devId: paramsArr[i], param: '', cmd: 'end'}).then(res => {
              console.log(res)
              this.boots = this.boots.map(val => {
                let obj = {}
                if (val.devId === paramsArr[i]) {
                  obj = {...val, ...{value: 1}}
                } else {
                  obj = {...val}
                }
                return obj
              })
            })
          }
          this.timeEnd = setTimeout(() => {
            this.loading = false
            this.boot = false
          }, 2000)
        }
      },
      onePostTimer (obj) {
        return window.myapi.cmdByIdd(obj).then(res => {
          if (res.data.status === 200) {
            return res.data.data
          }
        }).catch((e) => {
        })
      },
      // end
      /*
      * 公共 m-Modal 弹窗 的 现场自动，远程人工 的 确认 commonUpdParam
      * */
      // 空压机 压力 弹窗 的确定方法
      pressureAir () {
        this.commonUpdParam(this.limitAir.devParams, 'isAir')
      },
      // 空压机 压力 弹窗 遮罩层方法
      pressureAirMask () {
        this.limitAir = {...this.limitCopy}
        this.isAir = false
      },
      // 冷却泵 压力 弹窗 的确定方法
      pressurePump () {
        this.commonUpdParam(this.limitPump.devParams, 'isPump')
      },
      // 冷却泵 压力 弹窗 遮罩层方法
      pressurePumpMask () {
        this.limitPump = {...this.limitCopy}
        this.isPump = false
      },
      // 冷干机 压力 弹窗 的确定方法
      pressureDryer () {
        this.commonUpdParam(this.limitDryer.devParams, 'isDryer')
      },
      // 冷干机 压力 弹窗 遮罩层方法
      pressureDryerMask () {
        this.limitDryer = {...this.limitCopy}
        this.isDryer = false
      },
      // 冷干机 压力 弹窗 的确定方法
      pressureTower () {
        this.commonUpdParam(this.limitTower.devParams, 'isTower')
      },
      // 冷干机 压力 弹窗 遮罩层方法
      pressureTowerMask () {
        this.limitTower = {...this.limitCopy}
        this.isTower = false
      },
      // 公共的 确认请求方法
      commonUpdParam (arr, key) {
        window.myapi.updParam(arr).then(res => {
          if (res.data.status === 200) {
            this[key] = false
          } else {
            let msg = res.data.msg ? res.data.msg : '请求数据失败!'
            this.$Message.error({content: msg, duration: 5, closable: true})
          }
        }).catch(function (e) {
        })
      },
      // end
      // 公共的 获取图表的方法
      comDevItemData (obj) {
        window.myapi.devItemData(obj).then(res => {
          if (res.data.status === 200) {
            let data = res.data.data.data
            // 调用折线图
            this.$nextTick(() => {
              this.initLineCharts(data)
            })
          } else {
            let msg = res.data.msg ? res.data.msg : '请求数据失败!'
            this.$Message.error({content: msg, duration: 5, closable: true})
          }
        }).catch(function (e) {
        })
      },
      // 激活按钮的 方法
      changeBtn (type) {
        if (this.activeBtn === type) return false
        this.activeBtn = type
        let params = {
          devId: this.mEchartsObj.devId,
          type: this.activeBtn,
          time: this.activeDate
        }
        this.comDevItemData(params)
      },
      // 点击 下载表格的方法
      downForm () {
        this.activeBtnForm = true
        let params = {
          devId: this.mEchartsObj.devId,
          type: this.activeBtn,
          time: this.activeDate
        }
        window.myapi.downDevItemData(params).then(res => {
          if (res.status === 200) {
            let url = window.URL.createObjectURL(new Blob([res.data], {type: res.data.type}))
            let filename = decodeURI(res.headers['content-disposition'].split(';')[1].trim().substr(
              'filename='.length))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', filename)
            document.body.appendChild(link)
            link.click()
            this.activeBtnForm = false
          } else {
            let msg = res.data.msg ? res.data.msg : '请求数据失败!'
            this.$Message.error({content: msg, duration: 5, closable: true})
          }
        }).catch(function (e) {
        })
      },
      // 点击 各个机器 弹出图表的方法
      openMachine (item) {
        clearTimeout(time)
        time = setTimeout(() => {
          this.mEcharts = true
          this.mEchartsObj = item
          this.activeBtn = this.mEchartsObj.props[0]
          let params = {
            devId: this.mEchartsObj.devId,
            type: this.activeBtn,
            time: this.activeDate
          }
          this.comDevItemData(params)
        }, 200)
      },
      // 关闭 单击 图表的弹窗
      mEchartsChange () {
        this.mEcharts = false
        // 时间 选择初始化 恢复默认的时间
        this.activeDate = new Date().format('yyyy-MM-dd hh')
      },
      // 获取数据的方法
      _getSttDevs (id) {
        return this.getSttDevs(id).then((res) => {
          // 空压机需要的数据 start
          if (res['制冷主机']) {
            let compressor = res['制冷主机']
            this.airCtrl = {...compressor.ctrl}
            this.airCompressor = compressor.cols
            // 6月18日修改新需求 没有的 数据 要 模拟 空位给显示出来
            if (compressor.values.length > 0) {
              if (compressor.values.length < 7) {
                // 创建一个 属性个数的数组
                let arr = Array.from(Array(compressor.values[0].data.length), (v, k) => k)
                let dataObj = {
                  unit: null,
                  dataType: null,
                  alias: null,
                  id: null,
                  value: null
                }
                // 填充 dataObj 这个初始化对象
                arr.fill(dataObj)
                // 合并到待 填充的 到 templete 绑定的对象
                let obj = {
                  ...{
                    devId: null,
                    ctrlProcess: [],
                    data: [],
                    devName: compressor.values[0].devName,
                    props: []
                  }, ...{data: arr}
                }
                let air = Array.from(Array(7 - compressor.values.length), (v, k) => k)
                this.airCompressorValue = compressor.values.concat(air)
                this.airCompressorValue = this.airCompressorValue.fill(obj, compressor.values.length)
                this.imgAirCompressor = this.airCompressorValue.map(item => {
                  let obj = {}
                  if (item.devId && item.data.findIndex(k => k.dataType === '运行状态') > -1) {
                    obj = {...item, ...{value: item.data.find(k => k.dataType === '运行状态').value}}
                  } else {
                    obj = {...item, ...{value: 2}}
                  }
                  return obj
                })
              } else {
                this.airCompressorValue = compressor.values
                this.imgAirCompressor = compressor.values.map(item => {
                  let obj = {}
                  if (item.data.findIndex(k => k.dataType === '运行状态') > -1) {
                    obj = {...item, ...{value: item.data.find(k => k.dataType === '运行状态').value}}
                  } else {
                    obj = {...item, ...{value: 2}}
                  }
                  return obj
                })
              }
              // end
            }
            // 空压机 参数设定 弹窗 需要的数据
            let airCtrl = {...compressor.ctrl}
            // 浅拷贝 ctrl 里面 需要的 控制的参数 数组
            let airDevParams = [...airCtrl.devParams]
            // 6月14日 修改新需求 模式选择
            let airIndex = airDevParams.findIndex(k => k.name === 'mode')
            if (airIndex > -1) {
              let delArr = airDevParams.splice(airIndex, 1)
              // 6月14日 修改新需求 模式选择
              let airSelect = airDevParams.findIndex(k => k.name === 'modeChoice')
              this.airSwitch = {...{devId: airCtrl.devId, devParams: delArr}}
              if (airSelect > -1) {
                let removeArr = airDevParams.splice(airSelect, 1)
                let [val] = removeArr
                // 三种模式 this.choice1 为0 的时候 为 远程模式, 改为 远程手动, 才能 双击设备图片
                this.choice1 = val.value
                if (!this.choice1) {
                  if (delArr.find(v => v.value === 0)) {
                    this.isBtn1 = true
                    this.selectValue1 = '现场自动'
                  } else {
                    this.isBtn1 = false
                    this.selectValue1 = '远程手动'
                  }
                }
              }
            }
            this.limitAir = {...{devId: airCtrl.devId, devParams: airDevParams}}
          }
          // end
          // 冷却泵需要的数据 start
          if (res['冷冻泵']) {
            let pump = res['冷冻泵']
            this.pumpCtrl = {...pump.ctrl}
            this.pumpCompressor = pump.cols
            // 6月18日修改新需求 没有的 数据 要 模拟 空位给显示出来
            if (pump.values.length > 0) {
              if (pump.values.length < 4) {
                // 创建一个 属性个数的数组
                let arr = Array.from(Array(pump.values[0].data.length), (v, k) => k)
                let dataObj = {
                  unit: null,
                  dataType: null,
                  alias: null,
                  id: null,
                  value: null
                }
                // 填充 dataObj 这个初始化对象
                arr.fill(dataObj)
                // 合并到待 填充的 到 templete 绑定的对象
                let obj = {
                  ...{
                    devId: null,
                    ctrlProcess: [],
                    data: [],
                    devName: pump.values[0].devName,
                    props: []
                  }, ...{data: arr}
                }
                let air = Array.from(Array(4 - pump.values.length), (v, k) => k)
                this.pumpCompressorValue = pump.values.concat(air)
                this.pumpCompressorValue = this.pumpCompressorValue.fill(obj, pump.values.length)
                this.imgPumpCompressor = this.pumpCompressorValue.map(item => {
                  let obj = {}
                  if (item.devId && item.data.findIndex(k => k.dataType === '运行状态') > -1) {
                    obj = {...item, ...{value: item.data.find(k => k.dataType === '运行状态').value}}
                  } else {
                    obj = {...item, ...{value: 2}}
                  }
                  return obj
                })
              } else {
                this.pumpCompressorValue = pump.values
                this.imgPumpCompressor = pump.values.map(item => {
                  let obj = {}
                  if (item.data.findIndex(k => k.dataType === '运行状态') > -1) {
                    obj = {...item, ...{value: item.data.find(k => k.dataType === '运行状态').value}}
                  } else {
                    obj = {...item, ...{value: 2}}
                  }
                  return obj
                })
              }
              // end
            }
            // 冷却泵 参数设定 弹窗 需要的数据
            let pumpCtrl = {...pump.ctrl}
            // 浅拷贝 ctrl 里面 需要的 控制的参数 数组
            let pumpDevParams = [...pumpCtrl.devParams]
            let pumpIndex = pumpDevParams.findIndex(k => k.name === 'mode')
            if (pumpIndex > -1) {
              let delArr = pumpDevParams.splice(pumpIndex, 1)
              // 6月14日 修改新需求 模式选择
              let pumpSelect = pumpDevParams.findIndex(k => k.name === 'modeChoice')
              this.pumpSwitch = {...{devId: pumpCtrl.devId, devParams: delArr}}
              if (pumpSelect > -1) {
                let removeArr = pumpDevParams.splice(pumpSelect, 1)
                let [val] = removeArr
                // 三种模式 this.choice1 为0 的时候 为 远程模式, 改为 远程手动, 才能 双击设备图片
                this.choice2 = val.value
                if (!this.choice2) {
                  if (delArr.find(v => v.value === 0)) {
                    this.isBtn2 = true
                    this.selectValue2 = '现场自动'
                  } else {
                    this.isBtn2 = false
                    this.selectValue2 = '远程手动'
                  }
                }
              }
            }
            this.limitPump = {...{devId: pumpCtrl.devId, devParams: pumpDevParams}}
          }
          // end
          // 冷干机需要的数据 start
          if (res['冷却塔']) {
            let dryer = res['冷却塔']
            this.dryerCtrl = {...dryer.ctrl}
            this.dryerCompressor = dryer.cols
            // 6月18日修改新需求 没有的 数据 要 模拟 空位给显示出来
            if (dryer.values.length > 0) {
              if (dryer.values.length < 7) {
                // 创建一个 属性个数的数组
                let arr = Array.from(Array(dryer.values[0].data.length), (v, k) => k)
                let dataObj = {
                  unit: null,
                  dataType: null,
                  alias: null,
                  id: null,
                  value: null
                }
                // 填充 dataObj 这个初始化对象
                arr.fill(dataObj)
                // 合并到待 填充的 到 templete 绑定的对象
                let obj = {
                  ...{
                    devId: null,
                    ctrlProcess: [],
                    data: [],
                    devName: dryer.values[0].devName,
                    props: []
                  }, ...{data: arr}
                }
                let air = Array.from(Array(7 - dryer.values.length), (v, k) => k)
                this.dryerCompressorValue = dryer.values.concat(air)
                this.dryerCompressorValue = this.dryerCompressorValue.fill(obj, dryer.values.length)
                this.imgDryerCompressor = this.dryerCompressorValue.map(item => {
                  let obj = {}
                  if (item.devId && item.data.findIndex(k => k.dataType === '运行状态') > -1) {
                    obj = {...item, ...{value: item.data.find(k => k.dataType === '运行状态').value}}
                  } else {
                    obj = {...item, ...{value: 2}}
                  }
                  return obj
                })
              } else {
                this.dryerCompressorValue = dryer.values
                this.imgDryerCompressor = dryer.values.map(item => {
                  let obj = {}
                  if (item.data.findIndex(k => k.dataType === '运行状态') > -1) {
                    obj = {...item, ...{value: item.data.find(k => k.dataType === '运行状态').value}}
                  } else {
                    obj = {...item, ...{value: 2}}
                  }
                  return obj
                })
              }
              // end
            }
            // 冷却泵 参数设定 弹窗 需要的数据
            let dryerCtrl = {...dryer.ctrl}
            // 浅拷贝 ctrl 里面 需要的 控制的参数 数组
            let dryerDevParams = [...dryerCtrl.devParams]
            let dryerIndex = dryerDevParams.findIndex(k => k.name === 'mode')
            if (dryerIndex > -1) {
              let delArr = dryerDevParams.splice(dryerIndex, 1)
              // 6月14日 修改新需求 模式选择
              let dryerSelect = dryerDevParams.findIndex(k => k.name === 'modeChoice')
              this.dryerSwitch = {...{devId: dryerCtrl.devId, devParams: delArr}}
              if (dryerSelect > -1) {
                let removeArr = dryerDevParams.splice(dryerSelect, 1)
                let [val] = removeArr
                // 三种模式 this.choice1 为0 的时候 为 远程模式, 改为 远程手动, 才能 双击设备图片
                this.choice3 = val.value
                if (!this.choice3) {
                  if (delArr.find(v => v.value === 0)) {
                    this.isBtn3 = true
                    this.selectValue3 = '现场自动'
                  } else {
                    this.isBtn3 = false
                    this.selectValue3 = '远程手动'
                  }
                }
              }
            }
            this.limitDryer = {...{devId: dryerCtrl.devId, devParams: dryerDevParams}}
          }
          // end
          // 冷却塔需要的数据 start
          if (res['冷却泵']) {
            let tower = res['冷却泵']
            this.towerCtrl = {...tower.ctrl}
            this.towerCompressor = tower.cols
            // 6月18日修改新需求 没有的 数据 要 模拟 空位给显示出来
            if (tower.values.length > 0) {
              if (tower.values.length < 4) {
                // 创建一个 属性个数的数组
                let arr = Array.from(Array(tower.values[0].data.length), (v, k) => k)
                let dataObj = {
                  unit: null,
                  dataType: null,
                  alias: null,
                  id: null,
                  value: null
                }
                // 填充 dataObj 这个初始化对象
                arr.fill(dataObj)
                // 合并到待 填充的 到 templete 绑定的对象
                let obj = {
                  ...{
                    devId: null,
                    ctrlProcess: [],
                    data: [],
                    devName: tower.values[0].devName,
                    props: []
                  }, ...{data: arr}
                }
                let air = Array.from(Array(4 - tower.values.length), (v, k) => k)
                this.towerCompressorValue = tower.values.concat(air)
                this.towerCompressorValue = this.towerCompressorValue.fill(obj, tower.values.length)
                this.imgTowerCompressor = this.towerCompressorValue.map(item => {
                  let obj = {}
                  if (item.devId && item.data.findIndex(k => k.dataType === '运行状态') > -1) {
                    obj = {...item, ...{value: item.data.find(k => k.dataType === '运行状态').value}}
                  } else {
                    obj = {...item, ...{value: 2}}
                  }
                  return obj
                })
              } else {
                this.towerCompressorValue = tower.values
                this.imgTowerCompressor = tower.values.map(item => {
                  let obj = {}
                  if (item.data.findIndex(k => k.dataType === '运行状态') > -1) {
                    obj = {...item, ...{value: item.data.find(k => k.dataType === '运行状态').value}}
                  } else {
                    obj = {...item, ...{value: 2}}
                  }
                  return obj
                })
              }
              // end
            }
            // 冷却泵 参数设定 弹窗 需要的数据
            let towerCtrl = {...tower.ctrl}
            // 浅拷贝 ctrl 里面 需要的 控制的参数 数组
            let towerDevParams = [...towerCtrl.devParams]
            let towerIndex = towerDevParams.findIndex(k => k.name === 'mode')
            if (towerIndex > -1) {
              let delArr = towerDevParams.splice(towerIndex, 1)
              // 6月14日 修改新需求 模式选择
              let towerSelect = towerDevParams.findIndex(k => k.name === 'modeChoice')
              this.towerSwitch = {...{devId: towerCtrl.devId, devParams: delArr}}
              if (towerSelect > -1) {
                let removeArr = towerDevParams.splice(towerSelect, 1)
                let [val] = removeArr
                // 三种模式 this.choice1 为0 的时候 为 远程模式, 改为 远程手动, 才能 双击设备图片
                this.choice4 = val.value
                if (!this.choice4) {
                  if (delArr.find(v => v.value === 0)) {
                    this.isBtn4 = true
                    this.selectValue4 = '现场自动'
                  } else {
                    this.isBtn4 = false
                    this.selectValue4 = '远程手动'
                  }
                }
              }
            }
            this.limitTower = {...{devId: towerCtrl.devId, devParams: towerDevParams}}
          }
          // end
        })
      },
      // 定时器 刷新方法
      async _controllersTimer (id, s) {
        await this._getSttDevs(id)
        // 空压机 的需要的数组
        let airArr = this.airCompressorValue.filter(item => {
          if (item.devId) return item
        }).map(v => v.devId)
        // 空压机 ctrl 需要的对象ID 推进循环 需要的数组id
        airArr.unshift(this.airCtrl.devId)
        // 冷却泵 的需要的数组
        let pumpArr = this.pumpCompressorValue.filter(item => {
          if (item.devId) return item
        }).map(v => v.devId)
        // 冷却泵 ctrl 需要的对象ID 推进循环 需要的数组id
        pumpArr.unshift(this.pumpCtrl.devId)
        // 冷干机 的需要的数组
        let dryerArr = this.dryerCompressorValue.filter(item => {
          if (item.devId) return item
        }).map(v => v.devId)
        // 冷干机 ctrl 需要的对象ID 推进循环 需要的数组id
        dryerArr.unshift(this.dryerCtrl.devId)
        // 冷却塔 的需要的数组
        let towerArr = this.towerCompressorValue.filter(item => {
          if (item.devId) return item
        }).map(v => v.devId)
        // 空压机 ctrl 需要的对象ID 推进循环 需要的数组id
        towerArr.unshift(this.towerCtrl.devId)
        // 定时器计数的
        let count = 0
        const time = () => {
          this.conTimer = setTimeout(() => {
            count += 3
            if (count > 30) {
              clearTimeout(this.conTimer)
              count = 0
            }
            // 空压机 的 定时更新
            for (let i = 0; i < airArr.length; i++) {
              if (airArr[i]) {
                (() => {
                  setTimeout(() => {
                    window.myapi.postTimer({id: airArr[i]}).then(res => {
                      if (res.data.status === 200) {
                        if (this.airCtrl.devId === res.data.data.devId) {
                          this.airCtrl = {...this.airCtrl, ...res.data.data}
                        }
                        this.airCompressorValue = this.airCompressorValue.map(item => {
                          if (item.devId === res.data.data.devId) {
                            item = {...item, ...res.data.data}
                          }
                          return item
                        })
                        this.imgAirCompressor = this.imgAirCompressor.map(item => {
                          if (item.devId === res.data.data.devId) {
                            item = {...item, ...res.data.data, ...{value: res.data.data.data.find(k => k.dataType === '运行状态').value}}
                          }
                          return item
                        })
                      }
                    }).catch((e) => {
                    })
                  }, 200 * i)
                })()
              }
            }
            // 冷却泵 的 定时更新
            for (let i = 0; i < pumpArr.length; i++) {
              if (pumpArr[i]) {
                (() => {
                  setTimeout(() => {
                    window.myapi.postTimer({id: pumpArr[i]}).then(res => {
                      if (res.data.status === 200) {
                        if (this.pumpCtrl.devId === res.data.data.devId) {
                          this.pumpCtrl = {...this.pumpCtrl, ...res.data.data}
                        }
                        this.pumpCompressorValue = this.pumpCompressorValue.map(item => {
                          if (item.devId === res.data.data.devId) {
                            item = {...item, ...res.data.data}
                          }
                          return item
                        })
                        this.imgPumpCompressor = this.imgPumpCompressor.map(item => {
                          if (item.devId === res.data.data.devId) {
                            item = {...item, ...res.data.data, ...{value: res.data.data.data.find(k => k.dataType === '运行状态').value}}
                          }
                          return item
                        })
                      }
                    }).catch((e) => {
                    })
                  }, 200 * i)
                })()
              }
            }
            // 冷干机 的 定时更新
            for (let i = 0; i < dryerArr.length; i++) {
              if (dryerArr[i]) {
                (() => {
                  setTimeout(() => {
                    window.myapi.postTimer({id: dryerArr[i]}).then(res => {
                      if (res.data.status === 200) {
                        if (this.dryerCtrl.devId === res.data.data.devId) {
                          this.dryerCtrl = {...this.dryerCtrl, ...res.data.data}
                        }
                        this.dryerCompressorValue = this.dryerCompressorValue.map(item => {
                          if (item.devId === res.data.data.devId) {
                            item = {...item, ...res.data.data}
                          }
                          return item
                        })
                        this.imgDryerCompressor = this.imgDryerCompressor.map(item => {
                          if (item.devId === res.data.data.devId) {
                            item = {...item, ...res.data.data, ...{value: res.data.data.data.find(k => k.dataType === '运行状态').value}}
                          }
                          return item
                        })
                      }
                    }).catch((e) => {
                    })
                  }, 200 * i)
                })()
              }
            }
            // 冷却塔 的 定时更新
            for (let i = 0; i < towerArr.length; i++) {
              if (towerArr[i]) {
                (() => {
                  setTimeout(() => {
                    window.myapi.postTimer({id: towerArr[i]}).then(res => {
                      if (res.data.status === 200) {
                        if (this.towerCtrl.devId === res.data.data.devId) {
                          this.towerCtrl = {...this.towerCtrl, ...res.data.data}
                        }
                        this.towerCompressorValue = this.towerCompressorValue.map(item => {
                          if (item.devId === res.data.data.devId) {
                            item = {...item, ...res.data.data}
                          }
                          return item
                        })
                        this.imgTowerCompressor = this.imgTowerCompressor.map(item => {
                          if (item.devId === res.data.data.devId) {
                            item = {...item, ...res.data.data, ...{value: res.data.data.data.find(k => k.dataType === '运行状态').value}}
                          }
                          return item
                        })
                      }
                    }).catch((e) => {
                    })
                  }, 200 * i)
                })()
              }
            }
            time()
          }, s)
        }
        // 定时器开关
        time()
      },
      // 空压系统 获取 工艺控制的 数据方法
      getSttDevs (id) {
        return window.myapi.getSpaceIdDevs({spaceId: id}).then(res => {
          if (res.data.status === 200) {
            return res.data.data
          } else {
            let msg = res.data.msg ? res.data.msg : '请求数据失败!'
            this.$Message.error({content: msg, duration: 5, closable: true})
          }
        }).catch(function (e) {
        })
      }
    },
    destroyed () {
      clearTimeout(this.conTimer)
      clearTimeout(this.timeEnd)
      clearTimeout(this.timeStart)
      // clearTimeout(this.commonTime)
      clearTimeout(time)
    },
    components: {ModelBtn, MSaveModal, MModal, SystemBtn, MDate, mTabs}
  }
</script>

<style lang='scss' scoped>
  .red {
    background-color: #f00 !important;
  }

  .green {
    background-color: #0f0 !important;
  }

  #cooling-controllers {
    @include controllers;

    .width-1105 {
      width: 1105px;
    }

    .width-684 {
      width: 684px;
    }
  }
</style>
